<script>
//DashBoard中使用的Table组件
import * as utils from '@/utils/helps';
import { on, off } from '@/utils/dom';

import DashTableHeader from './DashTableHeader';
import DashTableBody from './DashTableBody';

export default {
  name: 'DashTable',
  components: {
    DashTableHeader,
    DashTableBody,
  },
  props: {
    //表格数据
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    //表格列
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    //隔行变色
    stripe: {
      type: Object,
      default() {
        return {
          show: true,
          color: '#f7f8f9',
        };
      },
    },
    //表格列排序
    sortable: {
      type: Boolean,
      default() {
        return true;
      },
    },
    //是否悬浮高亮
    highlight: {
      type: Boolean,
      default() {
        return false;
      },
    },
    //标题样式
    headerStyle: {
      type: Object,
      default() {
        return {
          show: true,
          height: 36,
          fontSize: '12px',
          backgroundColor: '#ffffff',
          color: '#666666',
          fontWeight: 'bold',
          textAlign: 'center',
          text: '未设置标题',
        };
      },
    },
    //表格页脚样式
    footerStyle: {
      type: Object,
      default() {
        return {
          show: false,
          height: 40,
          fontSize: '12px',
          backgroundColor: '#fff',
          color: '#000',
          fontWeight: 'bold',
          textAlign: 'left',
          text: '未设置页脚',
        };
      },
    },
    //表格列样式
    columnStyle: {
      type: Object,
      default() {
        return {
          height: 32,
          fontSize: '12px',
          backgroundColor: '#eceff1',
          color: '#666666',
          fontWeight: 'bold',
          textAlign: 'center',
          borderColor: '#dfe4e7',
          borderWidth: 1,
          borderStyle: 'solid',
        };
      },
    },
    //表格行样式
    rowStyle: {
      type: Object,
      default() {
        return {
          height: 32,
          fontSize: '12px',
          backgroundColor: '#ffffff',
          color: '#333333',
          fontWeight: 'normal',
          textAlign: 'center',
          horizenBorderColor: '#eceff1',
          horizenBorderWidth: 1,
          horizenBorderStyle: 'solid',
          verticalBorderColor: '#eceff1',
          verticalBorderWidth: 1,
          verticalBorderStyle: 'solid',
        };
      },
    },
    //表格样式
    tableStyle: {
      type: Object,
      default() {
        return {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
          backgroundColor: '#ffffff',
          borderColor: '#dfe4e7',
          borderWidth: 1,
          borderStyle: 'solid',
        };
      },
    },
  },
  data() {
    return {
      showVerticalScrollBar: false, //是否显示垂直滚动条
      scrollWidth: utils.getScrollBarSize(), //滚动条宽度
      cloneColumns: [], //计算列
      cloneRows: [], //计算行
    };
  },
  computed: {
    tableComputedStyle() {
      return {
        borderWidth: `${this.tableStyle.borderWidth}px`,
        borderColor: this.tableStyle.borderColor,
        borderStyle: this.tableStyle.borderStyle,
        top: `${this.tableStyle.top}px`,
        right: `${this.tableStyle.right}px`,
        bottom: `${this.tableStyle.bottom}px`,
        left: `${this.tableStyle.left}px`,
      };
    },
    headerComputedStyle() {
      return {
        ...this.headerStyle,
        height: `${this.headerStyle.height}px`,
        lineHeight: `${this.headerStyle.height}px`,
      };
    },
    contentComputedStyle() {
      let style = {};
      style.top = this.headerStyle.show ? `${this.headerStyle.height}px` : 0;
      style.bottom = this.footerStyle.show ? `${this.footerStyle.height}px` : 0;
      return style;
    },
    footerComputedStyle() {
      return {
        ...this.footerStyle,
        height: `${this.footerStyle.height}px`,
        lineHeight: `${this.footerStyle.height}px`,
      };
    },
  },
  watch: {
    columns(newValue) {
      this.makeData();
      this.handleResize();
    },
  },
  created() {
    this.makeData();
  },
  mounted() {
    this.handleResize();
    on(window, 'resize', this.handleResize);
  },
  beforeDestroy() {
    off(window, 'resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        this.setLayout();
      });
    },
    //计算布局
    setLayout() {
      //计算是否滚动条
      let twHeight = this.$refs.tbody.$el.offsetHeight;
      let tcHeight = this.rowStyle.height * this.data.length;
      this.showVerticalScrollBar = twHeight < tcHeight;

      //按均值计算列宽度
      let tw = this.$refs.tbody.$el.offsetWidth;
      let cw = this.showVerticalScrollBar ? tw - this.scrollWidth : tw;
      let aw = Math.floor(cw / this.cloneColumns.length);
      let rw = cw - aw * this.cloneColumns.length;
      this.cloneColumns.forEach((item, index) => {
        let w = aw;
        rw > 0 && w++ && rw--;
      });
    },
    //数据处理
    makeData() {
      this.cloneColumns = utils.deepCopy(this.columns);
      this.cloneRows = utils.deepCopy(this.data);
      this.cloneColumns.forEach((item, index) => {
        item._index = index + 1;
        item._sortType = 'normal';
      });
    },
    //排序
    sortData(index, sortType) {
      if (this.cloneColumns[index]._sortType == sortType) {
        sortType = 'normal';
      }
      let cloneColumns = utils.deepCopy(this.cloneColumns);
      cloneColumns.forEach(p => (p._sortType = 'normal'));
      cloneColumns[index]._sortType = sortType;
      let cloneRows = utils.deepCopy(this.data);
      let key = cloneColumns[index].key;
      cloneRows.sort((a, b) => {
        if (sortType === 'asc') {
          return a[key] > b[key] ? 1 : -1;
        } else if (sortType === 'desc') {
          return a[key] < b[key] ? 1 : -1;
        }
      });
      this.cloneColumns = cloneColumns;
      this.cloneRows = cloneRows;
    },
  },
};
</script>
<template>
  <div
    :style="{backgroundColor:tableStyle.backgroundColor}"
    class="dash-table-wrapper">
    <div
      :style="tableComputedStyle"
      class="dash-table-inner">
      <div
        v-if="headerStyle.show"
        :style="headerComputedStyle"
        class="dash-table-header">
        <slot name="header">{{ headerStyle.text }}</slot>
      </div>
      <div
        :style="contentComputedStyle"
        class="dash-table-content">
        <DashTableHeader
          :columns="cloneColumns"
          :column-style="columnStyle">
        </DashTableHeader>
        <DashTableBody
          ref="tbody"
          :columns="cloneColumns"
          :data="cloneRows"
          :row-style="rowStyle"
          :stripe="stripe">
        </DashTableBody>
      </div>
      <div
        v-if="footerStyle.show"
        :style="footerComputedStyle"
        class="dash-table-footer">
        <slot name="footer">{{ footerStyle.text }}</slot>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.dash-table-wrapper {
  border: 1px solid #dfe4e7;
  height: 100%;
  position: relative;
}

.dash-table-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.dash-table-header {
  padding: 0 15px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.dash-table-content {
  position: absolute;
  left: 0;
  right: 0;
}

.dash-table-footer {
  padding: 0 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
